<template>
  <div class="main">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="top"
      label-width="100px"
      class="demo-ruleForm"
    >
		<el-form-item label="人群类型" required>
			<el-radio-group v-model="ruleForm.personnelType">
				<el-radio label="3">正常</el-radio>
				<el-radio label="0">确诊</el-radio>
				<el-radio label="1">疑似</el-radio>
				<el-radio label="2">密接</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="是否发热（体温>=37.3℃）" required>
			<el-radio-group v-model="ruleForm.fever">
				<el-radio label="0">否</el-radio>
				<el-radio label="1">是</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="体温" v-if="ruleForm.fever==1" prop="temperature">
			<el-input v-model="ruleForm.temperature" placeholder="请填写体温, 如: 37.0 "></el-input>
		</el-form-item>
		<el-form-item label="其他症状">
			<el-checkbox-group v-model="ruleForm.symptom">
				<el-checkbox label="乏力" name="type"></el-checkbox>
				<el-checkbox label="干咳" name="type"></el-checkbox>
				<el-checkbox label="肌肉酸痛" name="type"></el-checkbox>
				<el-checkbox label="寒战" name="type"></el-checkbox>
				<el-checkbox label="呼吸困难" name="type"></el-checkbox>
				<el-checkbox label="咽痛" name="type"></el-checkbox>
				<el-checkbox label="头疼" name="type"></el-checkbox>
				<el-checkbox label="眩晕" name="type"></el-checkbox>
				<el-checkbox label="腹痛" name="type"></el-checkbox>
				<el-checkbox label="腹泻" name="type"></el-checkbox>
				<el-checkbox label="恶心" name="type"></el-checkbox>
				<el-checkbox label="呕吐" name="type"></el-checkbox>
				<el-checkbox label="鼻塞" name="type"></el-checkbox>
			</el-checkbox-group>
		</el-form-item>
      	<!-- <button @click="removeDomain()">删除</button> -->
		<el-form-item label="其他需要报告的情况">
			<el-input maxlength="255" type="textarea" show-word-limit v-model="ruleForm.remark"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
			<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
		</el-form-item>
    </el-form>
  </div>
</template>
<script>
import { Confirm, Datetime, PopupPicker, Popup, TransferDom } from "vux";

export default {
  components: {
    Confirm,
    Datetime,
    PopupPicker,
    Popup
  },
  data() {
    return {
      relieveDateShow: false,
	  niden: true,
	  remnant:0,
      ruleForm: {
        personnelType: "3", //人群类型
        fever: "0", //是否发热（体温>=37.3℃）
        temperature: "", //体温
        symptom: [], //其他症状
        remark: "",//其他需要报告的情况
      },
      rules: {
        temperature: [
          { required: true, message: "请输入体温", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        coment: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    };
  },
  watch:{

    },
  methods: {
    submitForm(formName) {
      debugger;
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!" );
          console.log(this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain() {
      this.ruleForm.name = "二次你";
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  height: 100%;
      background: #f8fafb;
    background-size: 100% 100%;
    // width: calc(100% -38px);
    border-radius: 8px;
    padding-top: 15px;
    border: 1px solid #e5e5e5;
    margin-left: 18px;
    margin-right: 18px;
    padding-bottom: 25px;
  overflow: auto;
  .demo-ruleForm {
    padding: 0 20px;
    color: #333;
  }
}
</style>
<style>
.demo-ruleForm .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.demo-ruleForm .el-checkbox-group {
  background-color: hsla(0, 0%, 100%, 0.9);
  color: #333;
  padding: 5px;
  margin: 5px 0;
  width: 100%;
  /* margin-bottom: 20px; */
  border-radius: 3px;
  -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8);
}
.demo-ruleForm .el-checkbox-group .el-checkbox {
  margin-right: 0;
  width: 33.33%;
}
.demo-ruleForm .el-radio-group {
  background-color: hsla(0, 0%, 100%, 0.9);
  color: #333;
  /* padding: 5px; */
  margin: 5px 0;
  width: 100%;
  /* margin-bottom: 20px; */
  border-radius: 3px;
  -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8);
}
.demo-ruleForm .el-radio-group .el-radio {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid rgb(191, 191, 191);
    margin-right: 0;
}
.demo-ruleForm .el-radio-group .el-radio:last-child {
  border-bottom: none;
}
</style>
